<template>
	<view class="container">
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#ffce45" :list="typeList" :current="pTypeIndex" @click="clickType"></u-tabs>
			<u-tabs lineColor="#ffce45" :list="typeSonList" @click="clicktypeSon"></u-tabs>
			<u-tabs lineColor="#ffce45" :list="areaList" :current="areaIndex" @click="clickArea"></u-tabs>
			<u-tabs lineColor="#ffce45" :list="otherList" :current="otherIndex" @click="clickOther"></u-tabs>
		</u-sticky>
		<view>
			<u-grid :border="false" col="3">
				<u-grid-item v-for="(listItem,listIndex) in vodList" :key="listIndex">
					<image class="vodImg" :src="listItem.vodPic" @click="imgClick(listItem.vodId)">
					</image>
					<text class="vodName">{{listItem.vodName}}</text>
				</u-grid-item>
			</u-grid>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/config/common.js'
	export default {
		data() {
			return {
				vodList: [],
				pTypeIndex: 0,
				areaIndex: 0,
				otherIndex: 0,
				pTypeId: 0,
				sTypeId: 0,
				area: '',
				other: '最新',
				status: 'loadmore',
				size: 39,
				page: 1,
				totalPage: 0,
				typeList: [],
				typeSonList: [],
				areaList: [{
					name: '全部地区'
				}, {
					name: '中国'
				}, {
					name: '日本'
				}, {
					name: '美国'
				}, {
					name: '英国'
				}, {
					name: '韩国'
				}, {
					name: '泰国'
				}],
				otherList: [{
					name: '最新'
				}, {
					name: '最热'
				}, {
					name: '高分'
				}]
			}
		},
		onLoad(res) {
			if (res.pTypeIndex) {
				this.pTypeIndex = res.pTypeIndex;
			}
			if (res.areaIndex) {
				this.areaIndex = res.areaIndex;
			}
			if (res.otherIndex) {
				this.otherIndex = res.otherIndex;
			}
		},
		onShow() {
			this.getAllVodType();
			setTimeout(() => {
				this.pTypeId = this.typeList[this.pTypeIndex].typeId;
				this.other = this.otherList[this.otherIndex].name;
				if (this.areaList[this.areaIndex].name != "全部地区") {
					this.area = this.areaList[this.areaIndex].name;
				}
				this.getVods();
			}, 1500)
		},
		onReachBottom() {
			if (this.page >= this.totalPage) {
				this.status = 'nomore';
				return;
			}
			this.status = 'loading';
			this.page = ++this.page;
			this.getVods();
			setTimeout(() => {
				if (this.page >= this.totalPage) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		methods: {
			getAllVodType() {
				http.get('/vodType/vodAllType', {}).then(res => {
					const data = res.data.data;
					var plist = [];
					for (var i = 0; i < data.length; i++) {
						var parent = data[i];
						var slist = [];
						var son = parent.typeSons;
						for (var j = 0; j < son.length; j++) {
							slist.push({
								typeId: son[j].typeId,
								name: son[j].typeName
							});
						}
						if (son.length != 0) {
							slist.unshift({
								typeId: 0,
								name: '全部类型',
							});
						}
						plist[i] = {
							'typeId': parent.typeId,
							'name': parent.typeName,
							'typeSonList': slist
						};
					}
					plist.unshift({
						typeId: 0,
						name: '全部类型',
						typeSonList: []
					});
					this.typeList = plist;
				}).catch(err => {
					console.log(err)
				})
			},
			clickType(item) {
				this.pTypeId = item.typeId;
				this.typeSonList = item.typeSonList;
				this.sTypeId = 0;
				this.page = 1;
				this.vodList = [];
				this.getVods();
			},
			clicktypeSon(item) {
				this.sTypeId = item.typeId;
				this.page = 1;
				this.vodList = [];
				this.getVods();
			},
			clickArea(item) {
				if (item.name === "全部地区") {
					this.area = "";
				} else {
					this.area = item.name;
				}
				this.page = 1;
				this.vodList = [];
				this.getVods();
			},
			clickOther(item) {
				this.other = item.name;
				this.page = 1;
				this.vodList = [];
				this.getVods();
			},
			getVods() {
				http.get('/vod/vods', {
					params: {
						pTypeId: this.pTypeId,
						sTypeId: this.sTypeId,
						area: this.area,
						other: this.other,
						current: this.page,
						size: this.size
					}
				}).then(res => {
					const data = res.data.data;
					this.totalPage = data.pages;
					if (this.vodList.length > 0) {
						var list = data.records[0].vodSimpleVos;
						for (var i = 0; i < list.length; i++) {
							this.vodList.push(list[i]);
						}
					} else {
						this.vodList = data.records[0].vodSimpleVos;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//点击音频事件
			imgClick(data) {
				//data：vodId
				uni.navigateTo({
					url: '/pages/video/video?vodId=' + data,
				})
			}
		}
	}
</script>

<style>
	.vodImg {
		width: 90%;
		height: 23vh;
		object-fit: cover;
		border-radius: 10px;
		background-color: #eeeeee;
	}

	.vodName {
		width: 90%;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>